<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>可编辑文件列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.css">
<script type="text/javascript" src="${base}/js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.js"></script>


</head>

<body>
	<!--整体div-->
	<div class="container">

		<input type="button" class="btn btn-primary"
			value="${template.templateName}">
		<div style="overflow-x: scroll; width: 100%; white-space: nowrap;">
			<table class="table table-condensed table table-bordered"
				style="width: 100%; height: auto;  overflow: auto;"
				id="table">
				<thead>
					<tr style="height: 40px">
						<c:forEach items="${templateColList}" var="templateCol">
							<th style="width: 120"><input style="width: 100px" disabled="disabled" value="${templateCol.colName}"/> </th>
						</c:forEach>
					</tr>
				</thead>
				<tbody id="tbody">
					<c:forEach begin="1" end="5" step="1">
						<tr class="tr" style="height: 40px">

							<c:forEach items="${templateColList}" var="templateCol">
								<c:if test="${templateCol.colType==0}">
									<td ">${templateCol.defVal}</td>
								</c:if>
								<c:if test="${templateCol.colType==1}">
									<c:set value="${ fn:split(templateCol.defVal, '||') }"
										var="val" />
									<td class="td" style="width: 5%;height:auto;"><select
										style="width: 100px; height: 30px;background:${fn:substring(val[0],fn:indexOf(val[0],'#'),fn:length(val[0]))} " >
											<c:forEach items="${val}" var="va">
											
												<option class="${fn:substring(va,fn:indexOf(va,'#'),fn:length(va))}">
												${fn:substring(va,0,fn:indexOf(va,'#'))}
												</option>
											</c:forEach>
									</select></td>
								</c:if>
							</c:forEach>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		<button type="button" class="btn btn-primary"
			onclick="AddRow(document.getElementById('table'),1)">增加一行</button>
		<%-- <a
			href="${pageContext.request.contextPath}/tpl/toTable?templateId=${template.id}&projectId=${project.id}">
			<input type="button" class="btn btn-primary" value="生成表格">
		</a> --%>

		

			<button class="btn btn-primary" data-toggle="modal"
				data-target="#myModal">生成表格</button>
			<!--  定义模态框触发器，此处为按钮触发  -->

			<form method="post" action="${pageContext.request.contextPath}/tpl/toTable?templateId=${template.id}&projectId=${project.id}&userId=${user.id}" class="form-horizontal" role="form"
				id="myForm" onsubmit="return ">
				<div class="modal fade" id="myModal" role="dialog" tabindex=-1
					aria-labelledby="myModalLabel" aria-hidden="true">
					<!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
					<div class="modal-dialog">
						<!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
						<div class="modal-content">
							<!--  显示模态框白色背景，所有内容都写在这个div里面  -->

							<div class="btn-info modal-header">
								<!--  模态框标题  -->
								<button type="button" class="close" data-dismiss="modal">&times;</button>
								<!--  关闭按钮  -->
								<h4>添加表格</h4>
								<!--  标题内容  -->
							</div>

							<div class="modal-body">
								<!--  模态框内容，我在此处添加一个表单 -->
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label for="uname" class="col-sm-3 control-label">表格名称：</label>
										<div class="col-sm-4">
											<input type="text" id="tableName" name="tableName"
												class="form-control well" placeholder="请输入表格名" /><span id="s1"></span>
												
										</div>
									</div>
									
								</form>
							</div>

							<div class="modal-footer">
								<!--  模态框底部样式，一般是提交或者确定按钮 -->
								<button type="submit" class="btn btn-info">确定</button>
								<button type="button" class="btn btn-default"
									data-dismiss="modal">取消</button>
							</div>

						</div>
						<!-- /.modal-content -->
					</div>
				</div>
				<!-- /.modal -->
			</form>
		

		
		


	</div>
</body>

</html>


